<template>
  <div class="tags-add-container">
    <div class="tags-add-top">
      <div class="tags-add-title"><i class="xicon-tag1"></i>{{ $i18n('label.name') }}</div>
      <div class="tags-add-btn" @click="openEditModel('add')" :title="$i18n('label.add')">
        <i class="syIcon sy-plus-line"></i>
      </div>
    </div>
    <div class="tags-add-list">
      <div
        :class="[
          'tags-add-list-item',
          { active: activeLabelId === item.labelId && isTagsSelected }
        ]"
        v-for="item in tagAddList"
        @click="handleNameClick(item)"
        :key="item.labelId">
        <!-- <div class="list-item-name"  :title="item.labelName"></div> -->
        <i class="xicon-tag2 list-item-icon" :style="{ color: item.color }"></i>
        <span class="list-item-name" :title="item.labelName">{{ item.labelName }}</span>
        <div class="list-item-operate">
          <div class="list-item-num">{{ item.relationCount }}</div>
          <div class="list-item-btns">
            <i
              class="syIcon sy-modify"
              :title="$i18n('label.edit')"
              @click.stop="openEditModel('edit', item.labelId)"></i>
            <i
              class="syIcon sy-delete"
              :title="$i18n('permission.operation.ReMove')"
              @click.stop="handleDelete(item.labelId)"></i>
          </div>
        </div>
      </div>
    </div>
    <TagEditModal
      :visible="modalVisible"
      :modalType="modalType"
      :currentLabel="currentLabel"
      @handleModal="handleModal"
      @callback="handleEditOk"></TagEditModal>
    <a-modal
      :title="$i18n('label.model.tips.name')"
      :visible="deleteVisible"
      :centered="true"
      :width="500"
      :bodyStyle="{ padding: '24px 0 55px 44px' }"
      @ok="handleDeleteOk"
      @cancel="handleDeleteCancel">
      <p>{{ deleteText }}</p>
    </a-modal>
  </div>
</template>

<script>
  /*global _ctxPath */
  import TagEditModal from '@/components/tag-edit/tag-edit-modal/index';
  import * as Fiber from 'fiber';
  export default {
    components: { TagEditModal },
    props: {
      isTagsSelected: Boolean
    },
    data() {
      return {
        modalVisible: false,
        modalType: 'add',
        deleteVisible: false,
        deleteText: '',
        tagAddList: [],
        currentLabel: {},
        activeLabelId: '',
        loading: false
      };
    },
    created() {
      this.getLabelList();
      window.addEventListener('storage', this.bindStorage);
    },
    methods: {
      handleNameClick(item) {
        this.activeLabelId = item.labelId;
        this.getLabelList(); // 这里是为了同步数据，防止移动端操作之后，数据不一致
        this.$emit('handleNameClick', item);
      },
      getLabelList(deleteId) {
        if (this.loading) return;
        this.loading = true;
        window.axios
          .post(`${_ctxPath}/rest/m3/pending/getPersonalLabels?option.n_a_s=1`, {})
          .then((res) => {
            this.loading = false;
            if (res.data && res.data.code == '0' && res.data.data) {
              let resData = res.data.data;
              this.tagAddList = resData;
              // 如果是删除的数据不存在了,需要将table数据重新定位
              if (deleteId === this.activeLabelId) {
                this.activeLabelId = resData[0]?.labelId;
                this.$emit('handleNameClick', resData[0]);
              }
            }
          });
      },
      openEditModel(type, id) {
        if (this.tagAddList.length >= 20 && type !== 'edit') {
          Fiber.message.error(this.$i18n('label.count.limit'));
          return;
        }
        this.modalType = type;
        if (type === 'edit' && id) {
          this.currentLabel = this.tagAddList.filter((item) => {
            return item.labelId === id;
          })[0];
        }
        this.handleModal();
      },
      handleModal() {
        this.modalVisible = !this.modalVisible;
        if (!this.modalVisible) {
          this.currentLabel = {};
        }
      },
      handleEditOk() {
        window.localStorage.setItem('tagChange', Math.random());
        this.getLabelList();
      },
      handleDelete(id) {
        this.currentLabel = this.tagAddList.filter((item) => {
          return item.labelId === id;
        })[0];
        this.deleteText = `${this.$i18n('label.need.delete.tips')}"${
          this.currentLabel.labelName
        }"?`;
        this.deleteVisible = true;
      },
      handleDeleteOk() {
        window.axios
          .post(`${_ctxPath}/rest/m3/pending/deleteLabel?option.n_a_s=1`, {
            labelId: this.currentLabel.labelId
          })
          .then((res) => {
            if (res.data && res.data.code == 0 && res.data.data) {
              window.localStorage.setItem('tagChange', Math.random());
              this.getLabelList(this.currentLabel.labelId);
              this.deleteVisible = false;
              this.currentLabel = {};
            }
          });
      },
      handleDeleteCancel() {
        this.deleteVisible = false;
        this.currentLabel = {};
      },
      bindStorage(event) {
        if (event.key == 'updateTodoTags') {
          this.getLabelList();
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tags-add-container {
    height: 200px;
    background-color: #f9fafc;
    border-radius: 8px;
    padding: 12px 7px 12px 7px;
    margin: 14px;
    color: #000;
    line-height: 1;
    display: flex;
    flex-direction: column;
    cursor: default;
    .tags-add-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 14px;
      padding-left: 5px;
      .tags-add-title {
        line-height: 20px;
        i {
          margin-right: 5px;
        }
      }
      .tags-add-btn {
        cursor: pointer;
        color: #8c8c8c;
        margin-right: 9px;
        i {
          font-size: 12px;
        }
      }
    }
    .tags-add-list {
      flex: 1;
      overflow: auto;
      .tags-add-list-item {
        display: flex;
        align-items: center;
        font-size: 12px;
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        padding-left: 7px;
        position: relative;
        .list-item-name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          max-width: 100%;
        }
        .list-item-icon {
          margin-right: 7px;
          font-size: 14px;
        }
        .list-item-operate {
          flex: 1;
          display: flex;
          justify-content: flex-end;
        }
        .list-item-num {
          border-radius: 4px;
          width: 20px;
          height: 20px;
          color: #999999;
          margin-right: 11px;
          text-align: center;
          line-height: 20px;
        }
        .list-item-btns {
          display: none;
          padding-right: 10px;
          i {
            color: #0077ff;
            font-size: 14px;
            cursor: pointer;
            &:nth-child(1) {
              margin-right: 8px;
            }
          }
        }
        &.active {
          background-color: #0077ff0d;
          .list-item-num {
            background-color: #f9fafd;
            color: #315cfa;
          }
          .list-item-name {
            span {
              font-weight: bold;
            }
          }
        }
        &:hover {
          background-color: #0077ff0d;
          .list-item-num {
            color: #315cfa;
            display: none;
          }
          .list-item-name {
            span {
              font-weight: bold;
            }
          }
          .list-item-btns {
            display: block;
          }
        }
      }
    }
  }
</style>
